<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>6-3三维变形</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        div{
            width:240px;
            height:180px;
            padding: 20px;
            margin: 20px auto;/*margin:auto;!*只有将元素居中才能容易看出正确的旋转效果*!*/
            border:20px solid;
            /*display: inline-block;*/
            color: #fff;
            text-shadow: 1px 1px 2px black;
            font-family: 微软雅黑;
            font-weight: bold;
            vertical-align: top;
            background: url("../05backgroundAndBorder/redBgFlower.jpg") 0 5% repeat-x, url("../05backgroundAndBorder/blackCat.jpg") center bottom no-repeat, linear-gradient(to bottom, #5964ae 0% , #557eff 25%, #f0d187 61.8%,#91a200 80%, green 95%);
            background-size: 10%,40%,100%;
            border-image: url("../05backgroundAndBorder/borderImg.png") 20  repeat;
            background-origin: padding-box;
        }
        div code{
            display: block;
            font-size: 12px !important;
            font-weight: normal;
            text-shadow: none;
        }
        #matrix2D, #matrix3D,#mulMatrix{
            perspective:500px;/*这个属性只能加给父元素才起作用*/
            word-break: break-all;
        }
        #matrix2D div:nth-of-type(1):hover{
            transform: translate(100px,50px);
        }
        #matrix2D div:nth-of-type(2):hover{
            transform: matrix(1,0,0,1,100,50);
        }

        #matrix3D div:nth-of-type(1):hover{
            transform: scale3D(0.8,0.5,1);/*三维中合并缩放的值要写成"scale3D()"*/
        }
        #matrix3D div:nth-of-type(2):hover{
            transform: matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);/*此处的属性值为matrix3d()*/
        }

        #mulMatrix div:nth-of-type(1):hover{
            transform: rotate(45deg) scale(1.5);
        }
        #mulMatrix div:nth-of-type(2):hover{
            transform: matrix(1.0606,1.0606,-1.0606,1.0606,0,1);
        }
     </style>
</head>
<body>
<h1>6-3三维变形</h1>
<h3>二维平移矩阵</h3>
<section id="matrix2D">
    <div><br><code>transform: translate(100px,50px);</code></div>
    <div><br><code>transform: matrix(1,0,0,1,100,50);</code>通过矩阵达到同样效果</div>
</section>

<h3>三维缩放矩阵</h3>
<section id="matrix3D">
    <div><br><code>transform: scale3D(0.8,0.5,1);</code></div>
    <div><br><code>transform: matrix(<br>1.0606,1.0606,-1.0606,1.0606,0,1);</code>这个矩阵是角度矩阵和缩放矩阵相乘得到的，具体计算过程此处省略，可参考书中723页。</div>
</section>

<h3>综合变形矩阵</h3>
<section id="mulMatrix">
    <div><br><code>transform: rotate(45deg)<br> scale(1.5);</code></div>
    <div><br><code>transform: matrix3d(0.8,0,0,<br>0,0,0.5,0,0,0,0,1,0,0,0,0,1);</code>旋转45°，再放大1.5倍</div>
</section>

</body>
</html>